<admintpl file="header" />
<head>
    <meta charset="UTF-8">
    <title>标签列表</title>
    <style type="text/css">
        * {margin:0;padding: 0;}
        body{font-family: "Microsoft YaHei","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;color:#999;font-size: 18px}
        ul,li{list-style: none;padding: 0;margin:0;}
        .label_tab{padding-left: 40px;font-size: 16px;}
        .label_tab ul{border: 1px solid #999;margin-bottom: 20px;}
        .label_tab li {float: left;width: 70px;height: 20px;text-align: center;cursor: pointer;padding: 0 10px;margin-bottom: 10px;}
        .label_tab_groud {margin-bottom:18px;padding-top: 8px; padding-left: 20px;border: 1px solid #999;}
        .label_tab_groud .number span {display: inline-block; width: 50px;cursor: pointer;}
        .label_tab_groud .letter span{display: inline-block;width: 37px;margin:10px 0;cursor:pointer;text-align: center;}
        .label_tab .active {background-color: #f1c40f}
        .label_content {padding-left: 40px;line-height: 40px;margin-top: 50px;}
        .label_content p {width:136px;height: 40px;border:1px solid #c8161d;border-top: 2px solid #c8161d;text-align: center;cursor: pointer;}
        .label_content .label_list a {
            display: inline-block;width: 136px;height: 40px;border: 1px solid #999;text-align: center;margin-right: 54px;overflow: hidden;text-decoration: none;
            cursor: pointer;
        }

        .del_label {
            position: relative;
            top: -35px;
            left: 13px;
            border: 1px solid #5bc0de;
            background-color: #f1c40f;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            display: inline-block;
            visibility: hidden;
            cursor: pointer;
        }
        .label-span:hover .del_label {
            visibility: visible;
        }

        .labe-type-tab {
            display: inline-block;
        }

    </style>
</head>
<body>
    <div class="wrap js-check-wrap">

        <ul class="nav nav-tabs">
            <li class="active"><a>标签列表</a></li>
            <li><a href="{:U('Label/AdminIndex/label_edit')}">新建标签</a></li>
        </ul>

        <div style="width: 1100px;">
            <div class="label_tab" id="label_tab">
                <ul class="labe-type-tab">
                    <li id="0">全部</li>
                    <volist name="label_type_lists" id="vo">
                        <li id="{$vo.id}" class="{$vo['id'] == $label_type_id ? 'active ' : ''}">{$vo.name}</li>
                    </volist>
                </ul>
                <div class="label_tab_groud">
                    <div class="letter">
                        <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span>
                        <span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span>
                        <span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span>
                        <span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>*</span>
                    </div>
                </div>
            </div>

            <div class="label_content">
                <div class="label_list">
                    <volist name="label_lists" id="vo">
                        <span class="label-span">
                            <span class="del_label" data-id="{$vo.id}">X</span><a class="label-a" href="{:U('Label/AdminIndex/label_edit', ['id' => $vo['id']])}">{$vo.name}</a>
                        </span>
                    </volist>
                </div>
            </div>
        </div>


    </div>
    <script type="text/javascript" src="__PUBLIC__/js/common.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/layer/layer_1.js"></script>
    <script type="text/javascript">

        var label_type_id   = "{$label_type_id}";
        var abbr             = "{$abbr}";

        (function(){
            // 初始化分类选择
            var tab_select = $('.labe-type-tab li.active').length;
            if (tab_select == 0) {
                $('.labe-type-tab li:first').addClass('active');
            }

            // 初始化字母选择
            $('.letter span').each(function () {
                var _abbr =  $(this).html();
                if (_abbr == abbr) {
                    $(this).addClass('active');
                }
            })


            //tab 标签页的切换效果
            $('body').delegate('#label_tab ul li', 'click', function () {
                $(this).addClass("active").siblings().removeClass("active");
                var _label_type_id = $(this).attr('id');
                label_type_id = _label_type_id;
                search_label();
            });

            // 字母切效果
            $('body').delegate('.letter span', 'click', function () {
                $(this).addClass("active").siblings().removeClass("active");
                var _abbr = $(this).html();
                abbr = _abbr;
                search_label();
            });

            $('body').delegate('.del_label', 'click', function () {
                var label_id    = $(this).attr('data-id');
                var parent      = $(this).parent();
                layer.confirm('确定删除？', {
                    btn: ['确定','取消'] //按钮
                }, function(index){
                    $.get('index.php?g=Label&m=AdminIndex&a=label_edit&delete=1&id=' + label_id, {}, function (data) {
                        if (data.status) {
                            parent.remove();
                        } else {
                            layer.msg(data.info);
                        }
                    })
                    layer.close(index);
                });
            });

        })()
        
        function search_label() {
            $.get("{:U('Label/AdminIndex/label_list')}", {label_type_id : label_type_id, abbr : abbr}, function (data) {
                $('.label_list').empty();
                var html = "";
                $.each(data.data, function (index, item) {
                    html += '<span class="label-span">';
                    html += '<span class="del_label" data-id="' + item.id + '">';
                    html += 'X</span>'
                    html += '<a href="' + "index.php?g=Label&m=AdminIndex&a=label_edit&id=" + item.id + '">' + item.name + "</a>"
                    html += '</span>'
                })
                $('.label_list').append(html);
            })
        }

    </script>
</body>
</html>